<template>
  <div class="container">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <img class="avatar" src="/src/assets/images/projects/manager.svg" alt="用户头像">
        <div class="info">
          <span class="name">张三</span>
          <span class="role">政府办项目管理员</span>
        </div>
      </div>
      <div class="stats">
        <div class="stat-item">
          <span class="value">5</span>
          <span class="label">重点关注</span>
        </div>
      </div>
    </div>
    
    <!-- 功能列表 -->
    <div class="menu-list">
      <div class="menu-group">
        <div class="menu-item" v-for="item in menuItems" :key="item.id" @click="handleMenuClick(item)">
          <div class="left">
            <i class="iconfont" :class="item.icon"></i>
            <span class="text">{{item.text}}</span>
          </div>
          <i class="iconfont icon-arrow-right">→</i>
        </div>
      </div>
      
      <div class="menu-group">
        <div class="menu-item" @click="handleLogout">
          <div class="left">
            <i class="iconfont icon-logout">⏏</i>
            <span class="text">退出登录</span>
          </div>
          <i class="iconfont icon-arrow-right">→</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const menuItems = ref([
  { id: 1, text: '修改密码', icon: 'icon-user' },
  { id: 4, text: '关于我们', icon: 'icon-about' }
])

const handleMenuClick = (item) => {
  // 处理菜单点击
  alert(`点击了${item.text}`)
}

const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    // 清除登录状态
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    
    // 跳转到登录页
    router.push('/login')
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: 20px;
}

.user-card {
  background: linear-gradient(135deg, #40A9FF 0%, #1890FF 100%);
  padding: 60px 30px 30px;
  color: #FFFFFF;
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 40px;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .info {
      margin-left: 20px;
      
      .name {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
      }
      
      .role {
        margin-left: 0;
        font-size: 14px;
        opacity: 0.8;
        display: block;
      }
    }
  }
  
  .stats {
    display: flex;
    
    .stat-item {
      flex: 1;
      text-align: center;
      
      .value {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 4px;
        display: block;
      }
      
      .label {
        font-size: 14px;
        opacity: 0.8;
      }
    }
  }
}

.menu-list {
  padding: 30px;
  
  .menu-group {
    background: #FFFFFF;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid #F5F5F5;
      cursor: pointer;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: #F9F9F9;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .left {
        display: flex;
        align-items: center;
        
        .iconfont {
          font-size: 20px;
          color: #1890FF;
          margin-right: 15px;
        }
        
        .text {
          font-size: 16px;
          color: #333333;
        }
      }
      
      .iconfont.icon-arrow-right {
        font-size: 16px;
        color: #999999;
      }
    }
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
  }
  
  .user-card {
    border-radius: 8px;
    margin-bottom: 20px;
  }
}
</style>
